<template>
    <div>
        <!-- 条件查询 -->
        <el-form :inline="true" :model="searchMap" style="margin: 20px;" ref="searchFormRef">
    <el-form-item prop="name">
      <el-input v-model="searchMap.name" placeholder="根据姓名查询" clearable />
    </el-form-item>
    <el-form-item prop="diretion" style="width: 200px;">
      <el-select
        v-model="searchMap.direction"
        placeholder="根据学习方向查询"
        clearable>
        <el-option v-for="option in directionOptions" :label="option.name" :value="option._id" :key="option._id"/>
      </el-select>
    </el-form-item>
    <el-form-item prop="class" style="width: 200px;">
      <el-select
        v-model="searchMap.class"
        placeholder="根据所在班级查询"
        clearable>
        <el-option v-for="option in classOptions" :label="option.classname" :value="option._id" :key="option._id"/>
      </el-select>
    </el-form-item>
    <el-form-item prop="teacher_id" style="width: 200px;">
      <el-select
        v-model="searchMap.teacher_id"
        placeholder="根据授课教师查询"
        clearable>
        <el-option v-for="option in teacherOptions" :label="option.name" :value="option._id" :key="option._id"/>
      </el-select>
    </el-form-item>
    <el-form-item prop="manager_id" style="width: 200px;">
      <el-select
        v-model="searchMap.manager_id"
        placeholder="根据班级学管查询"
        clearable>
        <el-option v-for="option in managerOptions" :label="option.name" :value="option._id" :key="option._id"/>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getStudentList">查询</el-button>
      <el-button @click="resetForm((searchFormRef))">重置</el-button>
      <el-button type="primary" @click="handleAdd">添加学生</el-button>
    </el-form-item>
  </el-form>
    <el-table :data="students" :border="true" style="width: 100%; height: 500px;">
     <el-table-column type="expand">
      <template #default="props">
        <div m="4">
          <p m="t-0 b-2">学生姓名: {{ props.row.name }}</p>
          <p m="t-0 b-2">性别: {{ dataFilter(props.row.gender,genderOptions) }}</p>
          <p m="t-0 b-2">学校: {{ props.row.school }}</p>
          <p m="t-0 b-2">专业: {{ props.row.major }}</p>
          <p m="t-0 b-2">年级: {{ dataFilter(props.row.grade,gradeOptions) }}</p>
          <p m="t-0 b-2">学历: {{ dataFilter(props.row.education,educationOptions) }}</p>
          <p m="t-0 b-2">学习方向: {{ dataFilter(props.row.direction,directionOptions) }}</p>
          <p m="t-0 b-2">身份号码: {{ props.row.id_number }}</p>
          <p m="t-0 b-2">电话号码: {{ props.row.phone }}</p>
          <p m="t-0 b-2">家长姓名: {{ props.row.parent }}</p>
          <p m="t-0 b-2">家长联系电话: {{ props.row.parent_phone }}</p>
          <p m="t-0 b-2">家庭住址: {{ props.row.address }}</p>
          <p m="t-0 b-2">QQ号码: {{ props.row.qq }}</p>
          <p m="t-0 b-2">所在班级: {{ classFilter(props.row.class,classOptions) }}</p>
          <p m="t-0 b-2">入学时间: {{ props.row.admission_date }}</p>
          <p m="t-0 b-2">授课教师: {{ dataFilter(props.row.teacher_id,teacherOptions) }}</p>
          <p m="t-0 b-2">学管: {{ dataFilter(props.row.manager_id,managerOptions) }}</p>
          <p m="t-0 b-2">
            照片:
            <el-image  v-for="(item,index) in props.row.pictures" 
            :key="index"
            style="width: 200px; height: 200px"
            :src="baseApi +'/upload/'+ item"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="getSrcList(props.row.pictures)"
            :initial-index="4"
            fit="cover" />
          </p>
          <p m="t-0 b-2">备注信息:<span v-html="props.row.note"></span></p>
        </div>
      </template>
      </el-table-column>
      <el-table-column label="序号" type="index" width="80px"/>
      <el-table-column label="学生姓名" prop="name" width="100px"/>
      <el-table-column label="性别" prop="gender" width="80px">
        <template #default="scope">
            {{ dataFilter(scope.row.gender,genderOptions) }}
        </template>
      </el-table-column>
      <el-table-column label="学习方向" prop="direction">
      <template #default="scope">
            {{ dataFilter(scope.row.direction,directionOptions) }}
        </template>
      </el-table-column>
      <el-table-column label="电话号码" prop="phone"/>
      <el-table-column label="所在班级" prop="class">
      <template #default="scope">
            {{ classFilter(scope.row.class,classOptions) }}
        </template>
      </el-table-column>
      <el-table-column label="授课教师" prop="teacher_id">
      <template #default="scope">
            {{ dataFilter(scope.row.teacher_id,teacherOptions) }}
        </template>
      </el-table-column>
      <el-table-column label="学管" prop="manager_id">
        <template #default="scope">
            {{ dataFilter(scope.row.manager_id,managerOptions) }}
        </template>
      </el-table-column>
      <el-table-column label="入学时间" prop="admission_date"/>
      <!-- 编辑栏 -->
      <el-table-column label="操作">
      <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row._id)">
              编辑
            </el-button>
            <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.row._id)"
            >
            删除
        </el-button>
    </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
   <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    </div>
</template>
<script setup lang="ts">
import type { studentInfoData } from '@/api/student/type';
import { onMounted, ref } from 'vue';
// 引入学生小仓库
import useStudentStore from '@/store/modules/student';
import useClassStore from '@/store/modules/class';
import useRoleStore from '@/store/modules/role';
import useUserStore from '@/store/modules/user';
import type { roleInfoData } from '@/api/role/type';
import type { userInfoData } from '@/api/user/type';
import type { classInfoData } from '@/api/class/type';
import { ElMessage, ElMessageBox, type FormInstance } from 'element-plus';


const baseApi = import.meta.env.VITE_APP_BASE_API
const studentStore = useStudentStore()
// 学生列表
const students = ref<studentInfoData[]>([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getStudentList()
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getStudentList()
}
// 条件查询对象
const searchMap = ref({
    name:'',
    direction:'',
    teacher_id:'',
    manager_id:'',
    class:'',
})
// 获取学生列表
const getStudentList = ()=>{
    studentStore.getStudentList({page:currentPage.value,size:pageSize.value,searchMap:searchMap.value}).then((response)=>{
        students.value = studentStore.students as studentInfoData[]
        total.value = response?.total as number
    })
}
const handleEdit = (_id:string) => {
  $router.push(`/student/update/${_id}`)
}
const handleDelete = (_id:string) => {
  ElMessageBox.confirm(
    '确定要删除此条数据码?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      studentStore.deleteStudent(_id).then(()=>{
        ElMessage({
        type: 'success',
        message: '删除成功',
      })
      })
      getStudentList()
    })
    .catch(() => {})
}



// 格式化数据开始-----------------------------------------------
const classStore = useClassStore();
const roleStore = useRoleStore();
const userStore = useUserStore();
// 角色数组
const roleOptions = ref<roleInfoData[]>([]);
// 用户数组
const userOptions = ref<userInfoData[]>([]);
// 班级列表
const classOptions = ref<classInfoData[]>([])
// 教师id
const teacher_role_id = ref("");
// 学管id
const manager_role_id = ref("");
// 教师数组
const teacherOptions = ref<userInfoData[]>([]);
// 学管数组
const managerOptions = ref<userInfoData[]>([]);
// 性别/年级/学历/学习方向 数据类型
interface filterData{
    _id:string,
    name:string
}
// 性别数据列表
const genderOptions = ref<filterData[]>([
    {_id:"0",name:"男"},
    {_id:"1",name:"女"}
])
// 年级数据列表
const gradeOptions = ref<filterData[]>([
    {_id:"1",name:"大一"},
    {_id:"2",name:"大二"},
    {_id:"3",name:"大三"},
    {_id:"4",name:"大四"},
    {_id:"5",name:"研究生"},
])
// 学历数据列表
const educationOptions = ref<filterData[]>([
    {_id:"1",name:"专科"},
    {_id:"2",name:"本科"},
    {_id:"3",name:"硕士"},
    {_id:"4",name:"社会"},
])
// 学习方向数据列表
const directionOptions = ref<filterData[]>([
    {_id:'1',name:"web前端"},
    {_id:'2',name:"Java"},
    {_id:'3',name:"C/C++"},
    {_id:'4',name:"直播电商"},
    {_id:'5',name:"少儿编程"},
    {_id:'6',name:"嵌入式"},
])
// 获取角色列表
const getClassList = () => {
    return new Promise((resolve,_reject)=>{
        if(classStore.classes && classStore.classes.length){
        classOptions.value = classStore.classes;
        resolve(true)
        }else{
            classStore.getClassAll().then(()=>{
                classOptions.value = classStore.classes as classInfoData[];
                resolve(true)
            })
        }
    })
}
// 获取角色数组
const getRoleList = () => {
  return new Promise((resolve,_reject)=>{
    if(roleStore.roles && roleStore.roles.length){
      roleOptions.value = roleStore.roles;
      roleOptions.value.forEach((item)=>{
        if(item.name == "教师"){
          teacher_role_id.value = item._id as string
        }else if(item.name == "学管"){
          manager_role_id.value = item._id as string
        }
      });
      resolve(true)
    }else{
      roleStore.getRoleList().then(()=>{
        roleOptions.value = roleStore.roles;
      roleOptions.value.forEach((item)=>{
        if(item.name == "教师"){
          teacher_role_id.value = item._id as string
        }else if(item.name == "学管"){
          manager_role_id.value = item._id as string
        }
      });
    });
    resolve(true);
  }
});
};
// 获取用户数组
const getUserList = () => {
  return new Promise((resolve,_reject)=>{
    if(userStore.users && userStore.users.length){
      userOptions.value = userStore.users;
      userOptions.value.forEach((item)=>{
        if(item.role_id == teacher_role_id.value){
          teacherOptions.value.push(item)
        }else if(item.role_id == manager_role_id.value){
          managerOptions.value.push(item)
        }
      });
      resolve(true)
    }else{
      userStore.getUserAll().then(()=>{
        userOptions.value = userStore.users;
        userOptions.value.forEach((item)=>{
        if(item.role_id == teacher_role_id.value){
          teacherOptions.value.push(item)
        }else if(item.role_id == manager_role_id.value){
          managerOptions.value.push(item)
        }
      });
    });
    resolve(true)
  }
});
};

// 格式化数据
const dataFilter = (_id:string,options:any)=>{
    // @ts-ignore
    const obj = options?.find(item=>item._id == _id)
    return obj ? obj.name : ""
}
// 格式化班级数据
const classFilter = (_id:string,options:any)=>{
    // @ts-ignore
    const obj = options?.find(item=>item._id == _id)
    return obj ? obj.classname : ""
}




// 格式化数据结束---------------------------------------------


//条件查询表单ref对象
const searchFormRef = ref()
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  getStudentList()
}

// 引入路由对象
import { useRouter } from 'vue-router';
const $router = useRouter()
// 跳转到添加/编辑学生组件
const handleAdd =()=>{
    $router.push("student/update/-1")
}
// 处理显示图片预览大图地址
const getSrcList= (imgList:string[])=>{
  return imgList.map(item=>baseApi + '/upload/' + item)
}

onMounted(()=>{
    getRoleList().then(()=>{
        getUserList().then(()=>{
            getClassList().then(()=>{
                getStudentList()
            })
        })
    })
})
</script>

<style scoped>

</style>